<template>
  <div>
    <el-button type="info" @click="jichushow">基础内容</el-button>
    <el-button type="success" @click="zhujiashow">深入组件</el-button>
    <el-button type="danger" @click="lujifuyong">逻辑复用</el-button>
    <el-button type="success" @click="jiXuan">机选</el-button>
  </div>
  <!-- 
    KeepAlive : 在每个组件切换时都保留被更改的状态，不会因切换而初始化组件中的数据 
    component : 动态切换组件
  -->
  <KeepAlive>      
    <component :is="isShowCpt"></component>   
  </KeepAlive> 

</template>

<script setup>
import { ref } from 'vue';
import HelloWorld from './components/xunlian/基础内容/HelloWorld.vue'
import BaseCompt from './components/xunlian/深入组件/BaseCop.vue'
import BaseFy from './components/xunlian/逻辑复用/BasePag.vue'
import JiXuan from './components/xunlian/caipiaojixuan/JiXuan.vue'

let isShowCpt = ref(HelloWorld)
function jichushow() {
  isShowCpt.value = HelloWorld
}
function zhujiashow() {
  isShowCpt.value = BaseCompt
}
function jiXuan() {
  isShowCpt.value = JiXuan
}
function lujifuyong() {
  isShowCpt.value = BaseFy
}
</script>

<style></style>
